<template>
  <Basic title="确认接收" :show-dialog="showAcceptDialog" @cancel="handleCancel" @confirm="handleConfirmDialog">
    <div class="pt-2">
      <van-field
        v-model="dateRange"
        is-link
        readonly
        required
        name="dataRange"
        clearable
        label="隔离时间"
        placeholder="隔离时间"
        input-align="right"
        @click="showCalendar = true"
        :rules="[{ required: true, message: '请输入隔离时间!' }]"
      />
      <van-calendar v-model:show="showCalendar" color="#2e7cff" type="range" teleport="body" @confirm="onCalendarConfirm" />
      <van-field
        v-model="grid_name"
        type="text"
        rows="1"
        required
        name="grid_name"
        clearable
        label="网格员姓名"
        placeholder="网格员姓名"
        input-align="right"
        :rules="[{ required: true, message: '请输入网格员姓名!' }]"
      />
      <van-field
        v-model="grid_phone"
        type="tel"
        rows="1"
        required
        name="grid_phone"
        clearable
        label="网格员电话"
        placeholder="网格员手机号"
        input-align="right"
        :rules="[{ required: true, message: '请输入网格员手机号!' }]"
      />
      <van-field
        v-model="principal_name"
        type="text"
        rows="1"
        required
        name="principal_name"
        clearable
        label="负责人姓名"
        placeholder="负责人姓名"
        input-align="right"
        :rules="[{ required: true, message: '请输入负责人姓名!' }]"
      />
      <van-field
        v-model="principal_phone"
        type="tel"
        rows="1"
        required
        name="principal_phone"
        clearable
        label="负责人电话"
        placeholder="负责人手机号"
        input-align="right"
        :rules="[{ required: true, message: '请输入负责人手机号!' }]"
      />
      <van-field
        v-model="remark"
        type="textarea"
        rows="2"
        required
        name="remark"
        clearable
        label="隔离原因"
        placeholder="隔离原因"
        input-align="right"
        :rules="[{ required: true, message: '请输入隔离原因!' }]"
      />
    </div>
  </Basic>
</template>

<script lang="ts">
import { computed, defineComponent, reactive, ref, toRefs } from 'vue'
import { usePersonStore } from '@/store/person'
import Basic from './Basic.vue'
import dayjs from 'dayjs'
import { Toast } from 'vant'
import { IdName } from '@/types/global'
import { useGlobalEffect } from '@/hooks/useGlobalEffect'

export default defineComponent({
  name: 'Accept',
  components: {
    Basic
  },
  props: {
    person: {
      type: Object,
      default: () => {}
    },
  },
  setup(props, { emit }) {
    const store = usePersonStore()
    const person = computed(() => props.person)
    const showAcceptDialog = computed(() => {
      if(!person.value) return false
      return store.showAcceptDialog
    })

    const {
      reasonList,
    } = useGlobalEffect()

    const query = reactive({
      isolate_starttime: '',
      isolate_endtime: '',
      remark: '',
      grid_phone: '',
      grid_name: '',
      principal_name: '',
      principal_phone: ''
    })

    const dateRange = ref('')
    const showCalendar = ref(false) // 隔离日期
    const onCalendarConfirm = (values:any) => {
      const [start, end] = values;
      showCalendar.value = false;
      const isolate_starttime = `${dayjs(start).format('YYYY-MM-DD')}`
      const isolate_endtime = `${dayjs(end).format('YYYY-MM-DD')}`
      query.isolate_starttime = isolate_starttime
      query.isolate_endtime = isolate_endtime

      dateRange.value = `${isolate_starttime} 至 ${isolate_endtime}`
    };

    const handleCancel = () => {
      store.setShowAcceptDialog(false)
    }

    const handleConfirmDialog = async () => {
      if (!dateRange.value) return Toast.fail('请选择隔离时间');
      if (!query.remark) return Toast.fail('请输入隔离原因');
      if (!query.grid_name) return Toast.fail('请输入网格员姓名');
      if (!query.grid_phone) return Toast.fail('请输入网格员手机号');
      if (!query.principal_name) return Toast.fail('请输入负责人姓名');
      if (!query.principal_phone) return Toast.fail('请输入负责人手机号');
      const { code, data } = await store.receivePerson({ ...query }, props.person.id) as any
      if(code === 200) {
        store.setShowAcceptDialog(false)
        emit('success', data)
      }
    }

    return {
      ...toRefs(query),
      showAcceptDialog,
      handleCancel,
      handleConfirmDialog,
      dateRange,
      showCalendar,
      onCalendarConfirm,
      reasonList
    };
  }
})
</script>

